<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<script src="js/jquery.js"></script>
	<script>
		$(() => {
			/*No cache for css*/
			$('link.cssLink').each((index, element) => {
				let url = $(element).attr('href');
				url += '?rand=' + Math.random();
				$(element).attr('href', url);
			});
			
			/*Auto completion function*/
			$('#searchInput').on('keydown', (e) => {
				let keyword = $(e.target).val();
				let requestData = 'keyword=' + keyword;
				console.log(requestData);
				$.ajax({
					url: 'Search',
					method: 'GET',
					accept: 'application/json',
					data: requestData,
					success: (productList, status) => {
						let dataList = $('#autoCompletion');
						/*Clear the origin datalist*/
						dataList.children().remove();
						productList.forEach((element, index) => {
							/*Max number of auto completion is 10
                            Although this should be done in server*/
							const MAX_NUMBER_OF_COMPLETION = 10;
							if (index < MAX_NUMBER_OF_COMPLETION) {
								dataList.append('<option class="autocomplete-option" value="' + element.name + '">' + element.name + '</option>');
							}
						});
						
					}
				});
			});
			
		});
	</script>
	<link class="cssLink" href="css/jpetstore.css" media="screen"
		  rel="StyleSheet" type="text/css"/>
	<link href="css/icono.min.css" rel="stylesheet" type="text/css">
	<link class="cssLink" href="css/mycss.css" rel="stylesheet" type="text/css">
	<meta content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org"
		  name="generator"/>
	<title>MyPetStore</title>
	<meta charset="UTF-8">
	<meta content="text/html; charset=UTF-8"
		  http-equiv="Content-Type"/>
	<meta content="max-age=0" http-equiv="Cache-Control"/>
	<meta content="no-cache" http-equiv="Cache-Control"/>
	<meta content="0" http-equiv="expires"/>
	<meta content="Tue, 01 Jan 1980 1:00:00 GMT" http-equiv="Expires"/>
	<meta content="no-cache" http-equiv="Pragma"/>
</head>
<body>
<script>
	$(() => {
		$('td img')
				.on('mouseover', (e) => {
					let itemId = $(e.target).parent().parent().attr('id');
					let ajaxData = 'json=' + encodeURI(JSON.stringify({itemId: itemId}));
					$.ajax({
						url: 'GetItem',
						method: 'GET',
						contentType: 'JSON',
						data: ajaxData,
						success: (item, status) => {
							let x = $(e.target).offset().left + 480;
							let y = $(e.target).offset().top;
							$('#attribute').text(item.attribute1, item.attribute2, item.attribute3
									, item.attribute4, item.attribute5);
							$('#name').text(item.product.name);
							$('#description').html(item.product.description);
							if (item['quantity'] === 0) {
								$('#inStock').html('<b>Out of stock</b>');
							}
							else {
								$('#inStock').html(item['quantity'] + ' <b>Instock</b>');
							}
							
							$('#floatBox')
									.attr('style', 'top:' + y + 'px; left:' + x + 'px;')
									.fadeIn();
						},
						error: () => {
							$('#floatBox').hide();
						}
					});
					
				})
				.on('mouseout', (e) => {
					$('#floatBox')
							.fadeOut();
				})
				.on('click', (e) => {
					console.log($(e.target).parent().prev().prev().children('a').attr('id', 'temp'));
					document.getElementById('temp').click();
					$('#temp').removeAttr('id');
				});
	});
</script>
<div th:include="common/top.html::top"></div>
<div id="content">
	<div id="BackLink">
		<a href="Category?categoryID=123" th:href="'Category?categoryID='+${product.categoryId}"
		   th:text="'Return to '+${product.categoryId}">Return to 123</a>
	</div>
	
	<div id="Catalog">
		<!--In the first place, the display of this div is none.
		When mouseover, js will set the position and fade in-->
		<div class="MyContainer TooltipBox" id="floatBox">
			<div class="left-triangle">◆</div>
			<div class="left-triangle-border">◆</div>
			<div class="Name MyContainer" id="name"></div>
			<div class="Description MyContainer" id="description"></div>
			<div class="Attribute MyContainer" id="attribute"></div>
			<div class="InStock MyContainer" id="inStock"></div>
		</div>
		<h2 th:if="${product}!=null" th:text="'Product Name '+${product.name}">Product Name: Default Product</h2>
		
		<table>
			<tr>
				<th>Item ID</th>
				<th>Product ID</th>
				<th style="width: 300px;">Description</th>
				<th>List Price</th>
				<th>&nbsp;</th>
			</tr>
			<tr id="123" th:each="item : ${itemList}" th:id="${item.itemId}">
				<td><a href="Item?itemID=123" th:href="'Item?itemID='+${item.itemId}" th:text="${item.itemId}">123</a>
				</td>
				<td class="productId" th:text="${item.product.productID}">456</td>
				<td th:utext="${item.product.description}">picture here</td>
				<td th:text="'$'+${item.listPrice}">$123.00</td>
				<td><a class="Button" href="Cart?itemID=123" th:href="'Cart?itemID='+${item.itemId}">Add to cart</a>
				</td>
			</tr>
			<!--		<c:forEach var="item" items="${sessionScope.itemList}">-->
			<!--			<tr id="${item.itemId}">-->
			<!--				<td><a href="Item?itemID=${item.itemId}"> ${item.itemId}</a></td>-->
			<!--				<td class="productId">${item.product.productID}</td>-->
			<!--				<td>${item.product.description}</td>-->
			<!--				<td><fmt:formatNumber pattern="$#,##0.00" value="${item.listPrice}"/></td>-->
			<!--				<td><a class="Button" href="Cart?method=addItemToCart&itemID=${item.itemId}">Add to-->
			<!--					cart</a></td>-->
			<!--			</tr>-->
			<!--		</c:forEach>-->
		</table>
	</div>
</div>
<div th:include="common/bottom.html::bottom"></div>
</body>
</html>
	